Getting Started with 
Dreamweaver CS6 



Introduction 


What You'll Do 


Adobe Dreamweaver CS6 is the industry leading web devel- 
opment tool for building web sites and applications. It pro- 
vides a combination of visual layout tools, application 
development features, and code editing support, enabling 
developers and designers at every skill level to create visu- 
ally appealing, standards-based sites and applications quickly 
and easily. From leading support for Cascading Style Sheet 
(CSS) design to hand-coding features, Dreamweaver pro- 
vides the tools professionals need to get the job done. In 
addition, developers can use Dreamweaver with the server 
technology of their choice to build powerful Internet applica- 
tions that connect users to databases, live data feeds, and 
legacy systems. 

Dreamweaver is an application that's rooted in the real 
world. In the real world, new or updated browsers come into 
the marketplace every year, and this creates problems in 
compatibility. Dreamweaver solves this problem by giving 
you powerful error-checking tools, and even gives you the 
ability to use Live Data View, and see exactly how your pages 
will perform on virtually any browser. 

In the real world, server technologies change quickly. 
Dreamweaver's extensible architecture makes server compat- 
ibility a snap by giving you the tools to customize for third- 
party server models. In the real world, computer operating 
systems change. Dreamweaver's CS6 supports use on 
Windows and Macintosh systems. 


Understand System Requirements 
Install Dreamweaver 
Get Started 

Examine the Dreamweaver Window 

Create a Web Site 

Open a Web Site 

Create a Blank Web Page 

Create Web Pages from Templates 

Create a Web Page from a Fluid Grid 
Layout 

Create a Web Page from a Sample 

Save a Web Page 

Open an Existing Web Page or File 

Work with Views 

Switch Between Pages and Views 

Preview a Web Page 


Web designers come at all levels of experience. 
Dreamweaver's user-friendly interface helps you out. If you're 
relatively new to the application, you can jump right in and 
begin designing simple web pages. If you are an experienced 
designer, you will be able to access the power and control 
that this application offers, and take your web designs where 
no one has gone before. 


Get Help While You Work 
Get Dreamweaver Updates on the Web 
Close a Web Site or File 
Finish Up 
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Understanding System Requirements 


System Requirements 

Before you can install Dreamweaver, you will 
need to make sure that your computer meets 
the minimum system requirements. 
Dreamweaver CS6 is supported on both 
Windows and Macintosh computers. 

While many designers bemoan the fact 
that their older computer systems will not 
support the newer applications, in the long 
run it's all for the best. The original versions 
of Dreamweaver (many years ago) were sim- 
ply non-visual HTML editing applications. 
Dreamweaver CS6 is not only doing things 
that were not even dreamed of in years past; 
it's also faster. As a web designer, time is an 
important part of getting the job done, and 
getting it done quickly. 

If I can accomplish more work in less time, 
it gives me more time to be creative, and able 
to meet my deadlines. And that's a good 
thing. So think of system requirements as the 
power behind the applications, that's going to 
help you do more, better work, and all in less 
time. 

For Windows Computers 

You need to have a computer with the follow- 
ing minimum configuration: 


♦ 1280 x 800 monitor resolution with 
16-bit video card. 

♦ Java Runtime Environment 1.6 
(included). 

♦ DVD-ROM drive. 

♦ QuickTime 7.6.6 software required for 
HTML5 media playback. 

♦ Internet connection required for 
activation, registration, and some 
online services. 

For Macintosh Computers 

You need to have a computer with the follow- 
ing minimum configuration: 

♦ Multicore Intel processor. 

♦ Mac OS X 10.6 or 10.7 or higher. 

♦ 512 MB of RAM. 

♦ 1.8 GB of available hard-disk space 
(additional free space required during 
installation). 

♦ 1280 x 800 monitor resolution with 
16-bit video card. 

♦ Java Runtime Environment 1.6. 

♦ DVD-ROM drive. 

♦ QuickTime 7.6.6 software required for 
HTML5 media playback. 


♦ Intel Pentium 4, AMD Athlon 64 (or 
compatible) processor. 

♦ Microsoft Windows 7, Windows Vista 
with Service Pack 1, or Windows XP 
with Service Pack 3 or higher. 

♦ 512 MB of RAM. 

♦ 1 GB of available hard-disk space 
(additional free space required during 
installation). 


♦ Internet connection required for 
activation, registration, and some 
online services. 
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Installing 

Dreamweaver 


Install Dreamweaver CS6 

Q Insert the Dreamweaver CS6 DVD 
into your DVD ROM drive, or 
download the software online to 
your hard disk. 

Q If necessary, double-click the DVD 
icon or open the folder with the 
downloaded software, and then 
double-click the setup icon. 

Follow the on-screen instructions 
to install the product; the installer 
asks you to read and accept a 
licensing agreement, enter a serial 
number, indicate the language you 
want, enter or create an Adobe ID 
or skip the step, and specify where 
you want to install the software. 


Did You Know? 

Most Adobe applications can be 
downloaded. It's all very simple, you 
go to www.adobe.com, click the 
Products menu item, and then select 
the application you want to purchase. 
You will need a credit card (of course), 
and a lot of bandwidth. 


The process of installing the Dreamweaver application is fairly straight- 
forward; you insert the Dreamweaver CS6 install disc into your DVD 
drive or download the software online to your computer, double-click 
the setup program and simply follow the on-screen instructions. The 
first thing that will happen is that the installer will check to see if you 
have the minimum system requirements. If you meet the minimums, the 
installer will guide you through the steps to complete the installation. 
The whole process takes about ten minutes, and at the end of the 
process you can launch Dreamweaver for the first time. Remember to 
have your serial number handy, because you will have to type it in dur- 
ing the installation process. It's a good idea to have that serial number 
in a safe place, just in case you would need to reinstall Dreamweaver. 
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Getting Started 


Start Dreamweaver CS6 in 
Windows 

Q Click Start on the taskbar. 

Q Point to All Programs (which 
changes to Back). 

Point to an Adobe Collection CS6 
menu, if needed. 

Click Adobe Dreamweaver CS6. 

Q If you're starting Dreamweaver 
CS6 for the first time, you might be 
prompted to specify the following: 

♦ Enter or create an Adobe ID to 
register the product, click 
Submit, and then click Done. 

The Dreamweaver window opens, 
displaying the Welcome screen. 


Did You Know? 

You can create and use a shortcut 
icon on your desktop to start 
Dreamweaver (Win). Click Start on the 
taskbar, point to All Programs, right- 
click Adobe Dreamweaver CS6, point 
to Send To, and then click Desktop 
(Create Shortcut). Double-click the 
shortcut icon on your desktop to start 
Dreamweaver. 


You can start Dreamweaver in several ways, depending on the platform 
you are using. When you start Dreamweaver, the software displays a 
Welcome screen and then the Dreamweaver window. When you start a 
new Dreamweaver session or close all documents, a Welcome screen 
appears in the Dreamweaver window, providing easy access links to 
open a file, open a recent file, create a new file, and create a new file 
from a template. You can also use links to access videos, and help infor- 
mation, including Getting Started, New Features, and online Community 
resources, such as the Dreamweaver Exchange web site, where you 
can download additional applications and information. 
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Start Dreamweaver CS6 in 
Macintosh 

Q Open the Applications folder 
(located on the main hard drive). 

♦ For Lion, you can also click the 
Launchpad icon on the Dock, 
and then click the Adobe 
Dreamweaver CS6 icon. 

Q Double-click the Adobe 

Dreamweaver CS6 folder or an 
Adobe Collection CS6 folder, if 
installed. 

Double-click the Adobe 
Dreamweaver CS6 program icon. 

If you're starting Dreamweaver 
CS6 for the first time, you might be 
prompted to specify the following: 

♦ Enter or create an Adobe ID to 
register the product, click 
Submit, and then click Done. 

The Dreamweaver window opens, 
displaying the Welcome screen. 


Did You Know? 

You can create a shortcut on the 
Macintosh. Drag and drop the 
Dreamweaver application icon to the 
bottom of the screen, and then add it to 
the shortcuts panel. 



Shortcut for Adobe Dreamweaver CS6 



Launchpad icon in Mac OS X Lion 


For Your Information 


Activating Dreamweaver 

In order to curb theft of their products, Adobe requires you to activate 
the Dreamweaver application. The first time you open it, you will be 
prompted to enter your serial number, and then activate Dreamweaver. 
You will be able to delay the activation process for up to 30 days; how- 
ever, on day 31 the application will cease to run until activated. 
Activation can be accomplished by the Internet, or by phone. 

You can launch Dreamweaver and open a document at the same time. 
Simply double-click on the document icon (i.e. index.html). If the docu- 
ment was originally created within Dreamweaver, the file automatically 
opens in the Dreamweaver application. 


Chapter 2 Getting Started with Dreamweaver CS6 15 


Examining the Dreamweaver Window 


When you start Dreamweaver, the program 
window displays a Graphical User Interface or 
GUI (pronounced "GOOEY") with windows 
and tools you can use to create and design 
web pages. These windows include the 
Program window. Document window, various 
panels, and the Properties panel. Depending 
on your installation and previous program 
usage, not all of these windows may appear, 
or additional ones may be visible. 


In Dreamweaver, windows appear in the 
Program window. The Program window dis- 
plays a program icon. Application bar (which 
displays options for working with and switch- 
ing between layout displays, web sites, and 
extension applications), menu bar (depending 
on screen size). Workspace menu. Search box 
for product help, resizing buttons, and a Close 
button at the top of the screen. 



Document Window 

Displays open documents along with the 
Document and Related Files toolbars. 


Applications bar 

Displays options for working with displays, 
sites, and extension applications. 


Controls 

Gives you 
access to 
Workspace 
menu, help 
Search box, 
and program 
buttons. 


Menu bar 

Displays a 
menu list of 
commands 
to execute 
specific 
tasks. 


Panels 

Gives you 
access to 
authoring 
tools and 
attribute 
settings for 
elements. 


Status bar 

Displays current information about the active 
document and common display tools. 


Property Panel/lnspector 

Displays information about the properties and 
attributes of tools and graphic elements. 
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A menu bar appears on or below the 
Applications bar with menu names. A menu is 
a list of commands that you use to execute or 
accomplish specific tasks. A command is a 
directive that accesses a feature of a program. 
Dreamweaver has its own set of menus, 
which are located on the menu bar along the 
top of the Dreamweaver window. On a menu, 
a check mark identifies a feature that is cur- 
rently selected (that is, the feature is enabled 
or on). To disable (turn off) the feature, you 
click the command again to remove the check 
mark. A menu can contain several check 
marked features. A bullet (Win) or diamond 
(Mac) also indicates that an option is enabled, 
but a menu can contain only one bullet-or 
diamond-marked feature per menu section. To 
disable a command with a bullet or diamond 
next to it, you must select a different option in 
the section on the menu. 

When you perform a command frequently, 
it's faster, and sometimes more convenient, to 
use a shortcut key, which is a keyboard alter- 
native to using the mouse. When a shortcut 
key is available, it is listed beside the com- 
mand on the menu, such as Q+F3 (Mac) or 
Ctrl+F3 (Win) for the Properties command on 
the Window menu. 

Below the menu bar is the Insert toolbar, 
which appears by default and provides tabs 
with a variety of different buttons. A Toolbar 
contains a set of commonly used buttons you 
can quickly access to help you to create web 
pages. Dreamweaver comes with four differ- 
ent toolbars (Document, Standard, Coding, 
and Style Rendering), which you can show or 
hide to customize the Program window. 

The Document window displays open 
Dreamweaver documents. Dreamweaver uses 
tabs to make it easier to switch back and forth 
between documents. Each document tab 
includes a Minimize, Maximize, and Close but- 


ton at the top, and a Status bar at the bottom, 
which displays current information about the 
active document and common display tools. 
Below a Document tab is the Related Files 
and Document toolbar. The Related Files tool- 
bar displays tabs to access the source code 
for the document file, and related external 
files. The Document toolbar appears by 
default with Page (Code, Split, and Design) 
and Live (Live Code, Live View, Inspect, and 
Multiscreen) View buttons. 

A panel is a window you can collapse, 
expand, and group with other panels, known 
as a panel group, to improve accessibility and 
workflow. A panel appears with a shaded 
header bar, which includes the window title 
and additional options, such as the Insert 
panel. A panel group consists of either indi- 
vidual panels stacked one on top of the other 
or related panels organized together with 
tabs, such as the Files panel, to navigate from 
one panel to another. Dreamweaver provides 
a wide variety of panels you can use to work 
with different aspects of a web page, includ- 
ing CSS Styles, Insert, Assets, AP Elements, 
Databases, Tags, and Frames, which you can 
open and close from the Window menu. As 
you open, close, and move around windows 
and panels to meet your individual needs, 
you can save the location of windows and 
panels as a custom panel layout set, which 
you can display again later. 

The Properties panel, known more com- 
monly as the Property Inspector, at the bot- 
tom of the Program window provides a 
convenient way to view and change attributes 
of any selected object or multiple objects — 
such as text, graphics, media, and shapes — on 
a web page. After you select an object, rele- 
vant commands and associated fields for it 
appear in the Property Inspector. 


Chapter 2 Getting Started with Dreamweaver CS6 17 


Creating a Web Site 


Create a New Web Site 

Q Define a local root folder where 
you'll store all the elements that 
you will use to build your web site. 

Start Dreamweaver. 

Click the Site menu, and then click 

New Site. 

Dreamweaver gives you several 
categories on the creation of a 
web site: Site, Servers, Version 
Control, and Advanced Settings. 

Click the Site category. 

Name your site (Site names are 
not file names, so feel free to use 
any naming convention you wish). 

Q Enter the location of your local 
root folder, or click the Browse For 
Folder icon, located to the right of 
the input box, navigate to the 
folder you want to use as the root 
folder, and then click Select. 

Q Click the Servers category. 

Q To specify the server (optional at 
this point; you can do it later) that 
will host your pages on the web, 
click the Add New Server button, 
specify the server name, FTP 
address, username and password, 
and root directory on the Basic 
tab, and then click Save. 


Before you create a web site, you need to create a local root folder 
where you'll store all the elements that make up the site, web sites are 
more than just a bunch of web pages. All the images, videos, naviga- 
tional buttons, documents, scripts, etc., are separate files that must be 
uploaded into those pages. Defining a web site instructs Dreamweaver 
that the local root folder is the folder location that contains all the ele- 
ments of your site. In turn, Dreamweaver will keep track of the files 
within the folder, automatically update them as needed, and give you 
access to them, while you're working. The Site Setup dialog box doesn't 
force you to complete the site setup unless it's required. As you work on 
your site and a task needs information from the Site Setup dialog box, 
Dreamweaver opens it and highlights the required setting. 
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Q Click the Version Control category. 

To use version control software 
(optional at this point; you can do it 
later), click the Access list arrow, 
click Subversion, and then specify 
the protocol type, server address 
and settings, and username and 
password. 

o Click the Advanced Settings 

category. 

A list of subcategories appears, 
where you can set advanced 
settings. You can set options for 
the following categories: Local 
Info, Cloaking, Design Notes, File 
View Columns, Contribute, 
Templates, Spry, and Web Fonts 
(New!). 

We'll deal with Advanced Settings 
in Chapter 20. 

® Click Save to complete the 
process. 

Dreamweaver creates a site 
definition based on your options 
and your choice of the local root 
folder (In our example, 
youtechtube). 

When you define a site in 
Dreamweaver, the Assets and 
Files panels will now display a list 
of all your folders and files. 


See Also 

See "Setting Advanced Site 
Definitions" on page 484 for informa- 
tion on using the Advanced tab in the 
Site Definition dialog box. 



For Your Information 
Creating a Local Root Folder 

The first step to a successful web site is careful planning, and the cre- 
ation of a local root folder. Since this is covered in Chapter 1, we'll 
assume that you've already taken care of this very important part of the 
design process. Remember, the local root folder contains all the ele- 
ments that you use to build your web site and all the individual pages 
and parts that it contains. It's very possible that you've already put in a 
lot of computer time before coming to this very important first step in 
Dreamweaver. For example, you may have created many of the images 
and graphics that you're going to use by working in Adobe Photoshop 
and Illustrator. You may have designed some Adobe Flash animations, 
and you might have even used Microsoft Word and Excel to generate 
some text documents and spreadsheets. All of these elements would 
be in the local root folder. In keeping with Chapter 1, we call this local 
root folder, youtechtube. Now that you have your local root folder, the 
next step is to inform Dreamweaver that this is the folder you'll be 
using for the creation of this particular web site. 
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Opening or Importing 
a Web Site 


Dreamweaver allows you to manage multiple sites. When you open 
Dreamweaver it will load the web site last used. If, however, you need to 
work on another web site it's a simple matter to redirect Dreamweaver 
to the needed site using the Manage Sites dialog box (New!), which 
you can also use to create, edit, duplicate, remove, export, and import 
sites. You can create and import sites from Dreamweaver — using a Site 
Definition File with the STE extension — and Adobe Business Catalyst 
Site (New!), which is a hosted web site solution that allows you to build 
dynamic, data-driven web sites. 


Open or Import Sites 

Click the Site menu, and then click 

Manage Sites. 

0 Select the site from Your Sites list. 

Q To import a site, do either of the 
following: 

♦ Dreamweaver Site. Click Import 
Site, select a Dreamweaver 
site definition file (.ste), and 
then click Open. 

♦ Business Catalyst Site. Click 

Import Business Catalyst Site 

(New!), sign in and enter 
requested information, if 
prompted, and then select the 
site. 

Q Click Done. 

Dreamweaver closes the first site 
and loads all the assets for the 
selected site. 


Did You Know? 

You can export a site. Click the Site 
menu, click Manage Sites, select the 
site, click the Export button, specify a 
name for the site definition file (.ste), 
select a location, and then click Save, 
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Use to delete, edit, duplicate 
or export a site. 


For Your Information 
Working with Business Catalyst Sites 

Adobe Business Catalyst is a hosted web site solution that allows 
you to build dynamic, data-driven web sites with some advanced 
features, such as search, forums, blogs, password protected areas, 
web forms, and online stores. You can create a new Business 
Catalyst Site from Dreamweaver by using the New Business Catalyst 
Site command (New!) on the Site menu or the New Business 
Catalyst Site button (New!) in the Manage Sites dialog box. If you 
already have a Business Catalyst site, you can import it into 
Dreamweaver by using the Import Business Catalyst Site button 
(New!) in the Manage Sites dialog box. Sign in and enter requested 
information, if prompted. 
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Creating a Blank 
Web Page 


Create a Blank Web Page 

Q Click the File menu, and then click 

New. 

TIMESAVER Press Ctrl+N 
(Win) or(t%\+N (Mac). 

The New Document dialog box 
opens. 

TIMESAVER To create a web 
page without the dialog box , click 
the file type you want at the 
Welcome Screen. 

Q Click the Blank Page category. 

Q Select the Page Type you want (in 
this example, HTML5 (New5.5)). 

Q Select the Layout you want. 

Q Click the DocType list arrow and 
select the option you want. 

Click the Layout CSS list arrow, if 
available, and select the option 
you want. 

^ Click the Link button to attach a 
CSS file to the current document. 

© To add an editable region for a 
blank HTML page, select the 

Enable InContext Editing check 
box. 

Click Create. 

Dreamweaver creates the new 
page and opens it. 


The process of creating a site can become involved; however, it all 
begins with the creation of pages. These pages will load static and 
dynamic content, and be bundled together with a navigational system; 
finally winding up as a web site. A page is based on a type, such as 
HTML, and layout (or structure), such as columns and headers, which 
includes HTML5 layouts (New5.5). A new page is a blank slate for you 
to draw. A new web page can be literally anything from a text page to a 
high-end page dealing with animation, video, audio, CSS, incontext edit- 
ing or any combination of the above. 
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Creating a Web 
Page from a Blank 
Template 


A Dreamweaver template is a common structure created and used for 
all or some pages of a web site. Each section of a web site can have its 
own template with variations in structure or color from the others. 
Templates are fantastic timesaving tools because they allow you to cre- 
ate pages that share the same design but different content, and if you 
modify a template document, you immediately update the design of all 
pages. Dreamweaver templates are special master files that contain 
editable and locked regions. Pages based on a template enable users to 
edit parts of a web page within the editable regions without the risk of 
accidentally changing the locked regions. This is useful if you are creat- 
ing a site that will be maintained by other users. You can specify which 
parts of pages editors can and cannot change. A template page is based 
on a type, such as HTML template, and layout (or structure), such as 
columns and headers, which includes HTML5 layouts (New5.5). 


Create a Blank Template 

Click the File menu, and then click 

New. 

Click the Blank Template category. 

Select the Template Type you want 
(in this example, HTML Template). 

Q Select the Layout you want (in this 
example, 2 column, elastic, left 
sidebar). 

In this example leave the Doc Type 
and Layout CSS at their default 
values of XHTML 1.0 Transitional, 
and Add to Head, respectively. 

Q Click Create. 

Dreamweaver opens the template. 

^ Click the File menu, click Save, 
click OK if necessary to dismiss 
the no editable region alert, 
specify a name, and then click 

Save. 
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For Your Information 

Storing Templates 

When you work with templates, Dreamweaver automatically creates a 
folder called Templates, and all template files are stored in this folder. 

If you move a template file outside that folder, Dreamweaver will not 
be able to create new files based on that template. In addition, it cre- 
ates problems when you insert paths for hyperlinks. Keep your tem- 
plates within the Templates folder. 
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Creating a Web Page 
from a Fluid Grid 
Layout 


Create a Web Page from a Fluid 
Grid Layout 

Click the File menu, and then click 

New. 

TIMESAVER Click the File 
menu , and then click New Fluid 
Grid Layout or click Fluid Grid 
Layout at the Welcome Screen. 

The New Document dialog box 
opens. 

Click the Fluid Grid Layout 

category. 

Q Specify the number of columns, a 
percentage of column width, and a 
percentage width for the device. 

^ Click the DocType list arrow and 
select the option you want. 

Click the Layout CSS list arrow, if 
available, and select the option 
you want. 

^ Click the Link button to attach a 
CSS file to the current document. 

Q To restore default settings, click 

Reset To Default. 

Q Click Create. 

Dreamweaver creates the new 
page and opens it. It also creates 
a boilerplace.css file, an external 
css file (one that you name), and a 
respond. min.js (JavaScript) file, 
which all appear on the Related 
Files toolbar. 


The process of creating a site just got easier with fluid grid layouts 
(New!). Instead of dealing with code, you can create complex web 
designs and layouts for mobile, tablet and desktop devices. Fluid grid 
layouts provide an adaptive display on different screen sizes on different 
types of devices. It contains 3 layouts — Mobile, Tablet, and Desktop — 
based on a single fluid grid and typography presets, which you can 
modify. After you create a new document, you can use the Insert panel 
to insert Fluid Grid Layout Div tags. 
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Creating a Web Page 
from a Template 


Instead of creating a web page from scratch, you can create a new 
web page based on the existing template, which can save you a lot of 
time and effort. In the New Document dialog box, you can select your 
own custom template designs available in the Page From Template cat- 
egory or click the Get More Content link to open the Dreamweaver 
Exchange on the web to download more template page designs. 


Create a Web Page from an 
Existing Template 

Q Click the File menu, and then click 

New. 

TIMESAVER Press Ctrl+N 
(Win) or(a%\+N (Mac). 

The New Document dialog box 
opens. 

Click the Page From Template 

category. 

Select the site that contains the 
template you want. 

Q Select the template you want to 
use. 

^ Select or clear the Update Page 
When Template Changes check 
box. 

Click Create. 

Click the File menu, click Save, 
specify a name, and then click 

Save. 
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Did You Know? 

You can create a document from a 
template in the Assets panel. Open the 
Assets panel using the Windows menu, 
click the Templates icon to view the list 
of templates, right-click (Win) or 
Control-click (Mac) the template you 
want, click New From Template, and 
then save the document. 
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Creating a Web Page 
from a Sample 


Create a Web Page from a 
Sample 

Q Click the File menu, and then click 

New. 

TIMESAVER Press Ctrl+N 
(Win) or(t%\+N (Mac). 

The New Document dialog box 
opens. 

Q Click the Page From Sample 

category. 

Q Select the type of sample folder 
you want to use: CSS Style Sheet 
or Mobile Starters (New5.5). 

Q Select the sample page you want 
(New5.5). 

Q If available, click the DocType list 
arrow, and then select from the 
available options. 

Click Create. 

Dreamweaver creates the new 
page and opens it. 

^ Click the File menu, click Save, 
specify a name, and then click 

Save. 

If the Copy Dependent Files dialog 
box appears, set the options you 
want, and then click Copy. 


If you're not sure where you start, you can use one of Dreamweaver's 
sample designs as a starting point for a new page and then make any 
changes you want to customize it to suit your specific needs. In the 
New Document dialog box, you can preview sample file designs and 
then create a new document based on the one you want to use. You can 
select from sample pages with CSS (Cascading Style Sheets) and 
Mobile Starters. The Mobile Starter (New5.5) sample pages provide 
jQuery functionality with a HTML5-based interface for mobile devices. 
When you create a new document, Dreamweaver makes a untitled copy 
of the sample file, which you can save with a new name. 
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Saving a Web Page 


Save a Web Page 

Click the File menu, and then 

select from the following options: 

♦ Save. If the file is new, you will 
be prompted to enter a proper 
file name and location for the 
new page. If the file has been 
previously saved, Dream- 
weaver saves the file, using the 
original file name and location 
(without prompting). 

TIMESAVER Press Ctrl+S 

(Win) or(^+S (Mac). 

♦ Save As. Use this option to 
make a copy of a file; you will 
be prompted to give the file a 
new name and location. 

TIMESAVER Press Ctrl+Shift+S 

(Win) or(t%\+Shift+S (Mac). 

♦ Save All. Use this option if you 
have more than one file open, 
and you want to save all of 
them at the same time. If any of 
the files are new, you will be 
prompted to enter a file name 
and location. 

♦ Save All Related Files. Use this 
option to save web site related 
files, which includes external 
CSS rules, server-side includes, 
external JavaScript files, parent 
templates files, library files, and 
iframe source files. 


Web pages should be saved as soon as they're opened. Naming con- 
ventions should be according to a predefined list of names that you 
created during the planning stage of the project. It's important to save 
pages early, that way if there's any problem such as: the application 
locking up, you will be able to start again from the last-saved version. 
Another important reason is error checking and validating. Web pages 
must be in a saved state before performing any validation. 


Local root site 



Site 

folders 


r \ 

For Your Information 
Naming Conventions for Files and Elements 

When you name your files and elements in Dreamweaver, it's impor- 
tant to use standard guidelines for naming to make sure your web site 
works properly on different server platforms, such as Windows or 
UNIX. Keep the following in mind: (1) Use underscores in place of 
spaces and avoid special characters (colons, slashes, periods, and 
apostrophes), and (2) use shorter names; filenames on the Mac can- 
not be more than 31 characters. 
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♦ Save As Template. Use this 
option to save the open 
document as a template. A 
template is a reusable 
document that contains 
editable regions. 

Q Navigate to the drive and folder 
location where you want to save 
the file. 

Type a name for the file, or use the 
suggested name. 

When naming files, avoid using 
spaces and special characters, or 
punctuation. 

For this example, leave the other 
options at their default levels. 

Click Save to finalize the process. 

Click Copy. 



o 


Did You Know? 

You can revert to the last saved ver- 
sion of a document. Click the File 
menu, click Revert, and then click Yes 
to revert to the previous version, or 
click No to keep your changes. If you 
save a document and then exit 
Dreamweaver, you cannot revert to the 
previous version when you restart 
Dreamweaver. 

Macintosh and Windows computers 
systems are not case sensitive. 

Therefore when you create a file name 
for a web page (or the files loaded on 
the page), you won't have a problem 
validating that page on your computer; 
however, when you move the site to 
the server, many servers are case-sen- 
sitive, and the same pages may not 
load correctly. For example, if a web 
page is named lndex.html and you call 
it using index.html. It validates on your 
computer, but it might not work on the 
server... pay attention to case. 


o 
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Opening an Existing 
Web Page or File 


Open an Existing Web Page 
or File 

Click the File menu, and then click 

Open. 

TIMESAVER Press Ctrl+O 
(Win) or^+O (Mac). 

0 Navigate to the drive and folder 
location where you want to open 
the web page. 

Click the Files Of Type list arrow 
(Win) or popup (Mac), and then 
select the type of file you want to 
open. 

Select the page you want to open 
in the working folder, or type the 
URL of the page you want. 

Q Click Open. 

If the file is read-only, click View, 
Make Writable, or Cancel. 

If you click View, a lock icon 
appears in the Document tab to 
the left of the name. 


Opening a web page is a simple procedure. You can use the Open sec- 
tion on the Welcome screen, Open commands on the File menu, or 
Adobe Bridge CS6 (a stand-alone file management program that comes 
with Dreamweaver CS6) to open web related files in several formats. 
You can open a web page from your local hard drive, a network drive, 
or a web server using an Uniform Resource Locator (URL). By default, 
Dreamweaver opens the last web site you worked on every time you 
open the program. If you open a new page while another site is still 
open, the new page opens in a new Dreamweaver window. Web pages 
using the HTML — Hypertext Markup Language — are the primary file 
types you open in Dreamweaver, however, you can open other types 
too. As an editor, you can use Dreamweaver to open many types of 
web related files, including style sheets, scripts, text, xml, and libraries. 
For web pages you recently opened, you can quickly reopen them 
again by pointing to Open Recent on the File menu, and then selecting 
the web page you want to open. 
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Open a Recently Opened 

Document 

♦ File Menu. Click the File menu, 
point to Open Recent, and then 
click the file you want to open. 

♦ Welcome Screen. At the Welcome 
Screen, click the file you want to 
open under Open A Recent Item. 


Did You Know? 

You can open a recent file quickly 
from the Start menu (Win). Click the 
Start button, point to Recent Items 
(Vista) or My Recent Documents (XP), 
and then click the file name you want 
to open. 

You can browse and open files in 
Adobe Bridge. Click the File menu, 
click Browse In Bridge, select a work- 
space display to view your files the 
way you want, navigate to the drive or 
folder where the file is located. To 
open the file, double-click the file icon. 
To return back to Dreamweaver, click 
the File menu, and then click Return To 
Adobe Dreamweaver. 


Click to open recently opened files 
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Click to access the Open dialog box 


Common Dreamweaver File Types 


File Type Description 

HTML Hypertext Markup Language (.html or .htm) files display 
web pages in a browser. 


CSS Cascading Style Sheet (.css) files are used to format 
and position HTML content in a consistent manner. 


GIF 

Graphics Interchange Format (.gif) files are used for 
graphics, such as logos, containing a max of 256 colors. 

JPEG 

Joint Photographic Expert Group (.jpeg) files are used for 
graphics, such as photographs, requiring more than 256 colors. 

XML 

Extensible Markup Language (.xml) files contain data in raw 
form that can be formatted using XSL 

XSL 

Extensible Stylesheet Language (.xsl or .xslt) files are used 
to style XML data. 

CFML 

ColdFusion Markup Language (.cfm) files are used to process 
dynamic web pages. 

ASPX 

ASP.NET files (.aspx) files are used to process dynamic web 
pages. 

PHP 

V 

Hypertext Preprocessor (.php) files are used to process 
dynamic web pages. 
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Working with Views 


When you open a web page, Dreamweaver 
displays three view buttons on the Document 
toolbar and uses View menu commands to 
help you work more efficiently. 

Code view displays the HTML and any 
embedded code for a page. 

Split Code view displays the screen in half 
vertically. Both halves display page code. 
Only available on View or Layout menu. 

Code and Design view displays the screen in 


half vertically. One half displays the current 
page in Code view and the other half displays 
the current page in Design view. 

Design view displays web pages in WYSIWYG 
(What You See Is What You Get) for editing. 

In a split screen display, you can change the 
placement of the content. Click the View 
menu, and then click Split Vertically (horizon- 
tal when unchecked), or Design View on Left 
or Design View onTop. 


Code view 


Split Code view 



Design view 


Code and Design view 





30 Chapter 2 


Switching Between 
Pages and Views 


Switch Between Web Pages 

♦ Web Pages. Click the tab with the 
name you want to display. 

TIMESAVER Press Ctrl+Tab or 
Ctrl+Shift+Tab to cycle thru tabs. 


Did You Know? 

You can view multiple documents in a 
single Document window (Mac). 

Control-click the tab, and then click 
Move To New Window. To combine 
separate documents into tabbed win- 
dows, click the Window menu, and 
then click Combine As Tabs. 


The tabs across the top of the Document window indicate the currently 
open web pages. You can click the tab to display the page or site you 
want. Below the tab in the Document window, the view buttons — Code, 
Split, and Design — appear for the current page. Design view displays 
the page or site as it appears on screen, while Code view displays the 
HTML code that makes up the page or site. Split (Code and Design) 
view shows you Code view at the top and Design view at the bottom, 
while Split Code view shows code at the top and bottom. 


Click tabs to switch between open files 



Switch Between Page Views 

♦ Switch Views. Click the Code, 
Split, or Design button below the 
tab on the Document toolbar in the 
Document window, or click the 
View or Layout menu, and then 
click the view you want: Code, 
Split Code, Design, and Code and 
Design. 

♦ The Split Code command (no 
button available) displays code 
in a split screen. 

TIMESAVER Press Ctr!+ 
(accent above Tab key) to cycle to 
the view you want. 


Click to switch views Click to display the Layout menu 
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Previewing Pages in 
Live View 


Preview a Web Page in Live 
View and Live Code View 

Open the web page you want to 
view. 

Switch to Design view or Code and 
Design view. 

Q Click the Live View button. 

If you want, make changes in Code 
view, in the CSS Styles panel, in an 
external CSS style sheet, or in 
another related file. 

♦ You can open related files by 
using the Related Files toolbar. 

Click the Refresh button in the 
Document toolbar or press F5 to 
view any changes. 

Q To go to Live Code view, click the 
Live Code button. 

Live code view appears displaying 
browser code. The non-editable 
code is highlighted in different 
colors for code state changes. 

Q To return back to Live view, click 
the Live Code button again. 

Q To return back to Design view, 
click the Live View button again. 


As you work, you'll probably want to see what pages look like. Instead 
of previewing pages in an external browser, you can view pages as they 
will appear in a browser using Live view, a non-editable view. Live view 
uses Webkit rendering to display pages, including HTML5 (New!), and 
supports previews of dynamic apps (New!), including CMSs such as 
WordPress, Joomla! and Drupal. You switch to Live view from Design 
view, which becomes frozen. Flowever, you can still use Code view and 
CSS3 properties (New5.5) to make changes and then refresh it back in 
Live view. In Live view, you can set options to follow links in pages, type 
URLs, and edit browsed pages from your site in a new tab. In addition, 
you can freeze JavaScript and the page in its current state to step 
through different states of an interactive element, such as menus, which 
you can't do in Design view. In Live view, you can view Live Code, which 
is a non-editable view of the executed code on the page. When code 
states change, Live Code highlights the code in color for easy viewing. 
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Select Live View Options 

Q Open the web page you want to 
view. 

Switch to Design view or Code and 
Design view. 

Click the Live View Options button 
on the Document toolbar (in Live 
view), or click the View menu, point 
to Live View Options, and then 
select any of the following: 

♦ Freeze JavaScript. Freezes 
elements that use JavaScript. 

4 Disable JavaScript. Displays the 
page as if the browser doesn't 
have JavaScript enabled. 

♦ Disable Plug-ins. Displays the 
page as if the browser doesn't 
have plug-in enabled. 

4 Highlight Changes in Live Code. 

Highlights code state changes in 
different colors. 

4 Edit the Live View Page in a 
New Tab. Opens Live view page 
in a new tab for editing; option 
available on Live View Browser 
submenu on the View menu. 

4 Follow Link or Follow Links 
Continuously. Allows you to 
follow links in Live view. 

4 Automatically Sync Remote 
Files. Automatically updates 
remote files. 

4 Use Testing Server For 
Document Source. Used for 
dynamic pages. Uses the file 
version on the site's testing 
server as the Live view source. 

4 Use Local Files For Document 
Links. Used for non-dynamic 
sites. Uses the local file version 
as the Live view source. 

4 HTTP Request Settings. Allows 
you to set advanced settings for 
displaying live data. 
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For Your Information 


Using Browser Navigation in Live View 

The Document toolbar allows you to navigate to pages in Live view. 

The Document toolbar in Live view includes similar options to those 
in a web browser. You can enter a URL in the Address bar, and use 
the Back, Forward, Refresh, and Home buttons to navigate to pages 
in Live view. The Home button displays your original document. You 
can also access these options on the Live View Browser submenu 
on the View menu. On the right side of the Document toolbar is the 
Live View Options button, which you can use the display content in 
Live view or Live Code view. You can also access these options on 
the Live View Options submenu on the View menu. 

v __ / 
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Previewing Pages in 
Multiscreen View 


Select Multiscreen Options 

Open the web page you want to 
view. 

Click the Multiscreen button list 
arrow on the Document toolbar (or 
click the View menu, and then 
point to Window Sizes), and then 
select any of the following: 

♦ Multiscreen Preview. Opens 
the Multiscreen Preview panel. 

♦ Pre-defined Window Sizes. 

Displays the current page with 
the selected size in the 
Document window. 

♦ Orientation Landscape or 
Portrait. Displays the current 
page with the orientation in the 
Document window. 

♦ Edit Sizes. Opens the 
Preferences dialog box, where 
you can add or remove window 
sizes. 

♦ Media Queries. Opens the 
Media Queries dialog box, 
where you can target your web 
page for multiple devices by 
specifying a different CSS file 
for each device. 


In addition to creating pages for web sites, you can also create web 
pages for different devices, such as smart phones and tablets. In 
Dreamweaver, you can preview a web page, including HTML5 (New!) 
content, in different sizes in the Document window (New5.5) or multi- 
sizes at once in the Multiscreen Preview panel (New5.5). When you 
design and test for smart phones and tablets that can change orienta- 
tion, you can use landscape and portrait orientations to preview your 
display. You can select pre-defined screen resolution sizes or create 
your own custom ones in Window Sizes preferences (New5.5), or 
define resolutions using media queries (New5.5). Media queries allow 
you to customize the appearance of a web page for different screen 
resolutions. 
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Preview a Web Page in 
Multiscreen View 

Q Open the web page you want to 
view. 

Q Click the Multiscreen button on 
the Document toolbar. 

♦ You can also click the File or 
Window menu, and then click 

Multiscreen Preview. 

The Multiscreen Preview panel 
opens, displaying the web page in 
multiple views for different 
devices. The default views include 
Phone (320x300), Tablet (768 x 
300), and Desktop (1126). 

Q To change the view points in the 
Multiscreen panel, click Viewpoint 
Sizes, enter width and height 
sizes, and then click OK. 

♦ You can also click Reset to 
defaults to restore the default 
settings for the different views. 

Q To change the specified web page, 

use the Back, Forward, Refresh, 
Home, or Address bar. 

Q To create or edit media queries, 
click Media Queries, specify the 
settings you want, and then click 

OK. 

^ Click the Close button in the 
Multiscreen panel. 




Viewpoint Sizes 


See Also 

See " Using Media Queries" on page 
526 for more information on creating 
and using media queries. 
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Previewing Pages in a 
Browser 


Preview a Web Page 

Open the web page you want to 
view. 

Click the File menu, point to 
Preview in Browser, and then 
select a browser from the 
available options. 

♦ Adobe BrowserLab. An online 
service that allows you to view 
using different browsers and 
operating systems. 

Q If the web page needs to be saved, 
you will be prompted to save the 
page before continuing. 

The web page opens and displays 
in the selected browser. Check the 
page display and links. 

^ When you're done, close the 
browser. 


Did You Know? 

What it means when you get an error 
previewing a web page. The preview 
in browser function may return a "page 
cannot be found" error if any of the 
characters in the path of the local 
folder have a different letter case than 
the path of the testing server folder. 


As you work on the development of your site, you will probably want to 
occasionally stop and see what the individual pages look like when pre- 
viewed within a specific browser. One of the most used features for 
testing your site is the Preview in Browser feature. This is one of the 
most used when working in Dreamweaver. It lets you see what your site 
will look like in a particular Internet browser. When testing a particular 
web page, it's a good idea to check it out in more than one browser, and 
in more than one version of the browser on different operating systems. 
For example, it may look great in Safari on the Macintosh, and not even 
work in Internet Explorer on Windows. If you don't have access to other 
browsers and operating systems, you can use Adobe BrowserLabs, an 
online service that you can use from within Dreamweaver, to view your 
web pages. 
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Edit the Browser List in 
Preferences 

Q Click the File menu, point to 

Preview In Browser, and then 
click Edit Browser List. 

Click the Plus (+) button to add 
another browser to the list. 

Give the new browser a name. 

Click Browse, and then locate the 
browser you want to add. 

Select the browser, and then click 

Open. 

^ Select the Primary Browser or 
Secondary Browser check box to 
decide whether this browser is the 
primary or secondary browser. 

Click OK to return to the 
Preferences dialog box. 

Click OK to close the dialog box 
and save your changes. 

Q Click the File menu, and then point 

to Preview In Browser. 

Your new browser option is added 
to the list. 




Did You Know? 

You can use keyboard shortcuts to 
preview pages. The Primary Browser 
launches when you press the F12 key. 
The Secondary Browser launches 
when you press Ctrl+FI 2 (Win) or 
[d~8g)+F1 2 (Mac). 


See Also 

See " Checking for HTML Browser 
Compatibility" on page 466 for more 
information on usability testing. 


For Your Information 
Using Adobe BrowserLab 

Adobe BrowserLab is an online service that allows you to test pages 
of your web site using different browsers and operating systems. 

You can use it as a standalone service or within Dreamweaver. In 
Dreamweaver, you can preview local web content from your local 
site, or from a remote or testing server. To set file location prefer- 
ences, click the Window menu, point to Extension, click BrowserLab 
to open the panel, click the Location list arrow, and then click Local 
or Server. You can preview a page from Design or Live view. To pre- 
view a page, click the File menu, point to Preview In Browser, and 
then click Adobe BrowserLab, or click the Preview button in the 
Adobe BrowserLab panel. 

v J 
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Getting Help While 
You Work 


When you start Dreamweaver Help, your web browser opens, displaying 
product help categories and topics. You can search product help from 
Online Help, Community Help, or Adobe.com by using keywords or 
phrases or browsing through a list of categories and topics to locate 
specific information. Online Help accesses product help online. 
Community Help accesses product help online and related community 
content, and Adobe.com accesses related help information on 
Adobe.com. When you perform a search using keywords or phrases, a 
list of possible matches is shown. In addition, comments and ratings 
from users are available to help guide you to an answer. You can add 
feedback and suggestions by signing in to Adobe.com. 


Get Dreamweaver Help 

Q Click the Help menu, and then 
click Dreamweaver Help. 

TIMESAVER Press FI (Win) or 
[ci!e]y (Mac). 

♦ To display a search list of 
topics, type a keyword in the 
Search box, and then press 
Enter (Win) or Return (Mac). 

Your web browser opens, 
displaying help topics. 

Q To search only the Help, selectthe 

This reference only check box. 

Q Click Help categories (plus sign 
icons) until you display the topic 
you want or type in keywords to 
search in the Search box. 

Q Click the topic you want. 

Read the topic, and if you want, 
click any links to get information 
on related topics or definitions. 

Q When you're done, click the Close 
button in your web browser. 
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Did You Know? 

You can view a PDF version of help. 

Click the Help menu, click Dream- 
weaver Help, and then clickthe View 
Help PDF on the Search bar. 
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Get Additional Help 

Q Click the Help menu, and choose 

from the following options: 

♦ Dreamweaver Help. Standard 
help systems for all areas of 
Dreamweaver. 

♦ Business Catalyst Help. Online 
help information about Adobe 
Business Catalyst web site 
solution. 

♦ Spry Framework Help. Online 
help for Spry, an open source 
Ajax framework developed by 
Adobe which is used in the 
construction of Rich Internet 
Applications. 

♦ Get Started with Business 
Catalyst InContext Editing. 

Online information about Adobe 
InContext Editing. 

♦ Reference. Gives you access to 
fourteen books and manuals 
with product information. 

♦ Dreamweaver Support Center. 

Gives you access to Adobe 
online support, and allows you 
to search through an extensive 
LiveDocs data base. 

♦ Dreamweaver Exchange. Gives 
you access to the Adobe 
Marketplace & Exchange with 
tools and resources. 

♦ Manage Extensions. Opens 
Adobe Extension Manager CS6. 

♦ CSS Advisor. Gives you access 
to information about using 
Cascading Style Sheets (CSS). 

♦ Adobe Online Forums. Gives 
you access to the Adobe online 
forums, where you can get 
information from contributors. 
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Getting Dreamweaver 
Updates on the Web 


Get Updates on the Web 

Q Click the Help menu, and then 
click Updates. 

Adobe checks your software with 
the latest available version. 

0 To manually check, click the 

Check For New Updates button. 

To change preferences, click 
Preferences, select the options 
you want, and then click OK. 

Select the update check boxes, 
and then click Update. 

When you're done, click the Close 
button. 


Did You Know? 

You can deactivate or activate 
Dreamweaver to use on another com- 
puter. You can use your serial number 
on only one computer at a time. If 
you're moving from one computer to 
another, you can deactivate your serial 
number on one computer and then 
activate it another one. Click the Help 
menu, click Deactivate, click Suspend 
Activation (saves serial number) or 
Deactivate Permanently (removes 
serial number), and then click Done. To 
activate it, click the Help menu, and 
then click Activate. 


As time passes, Dreamweaver — like any other program — will change. 
There are two types of changes to a program: updates and patches. 
Updates are improvements to a program such as a new feature, option, 
or command. Patches are software fixes for problems discovered after 
the public release of the program. The good news is that both updates 
and patches are free, and once downloaded, are self-installing. Adobe 
gives you two ways to check for changes. You can check manually by 
going to the Adobe web site, or automatically through the Adobe Adobe 
Application Manager. The Adobe Application Manager Preferences 
dialog box allows you to set update options for Dreamweaver and other 
installed Adobe products, such as Bridge. You can also set an option to 
have Adobe notify you of updates in the menu bar. 
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□ Artohr AppUration Manager 

Preferences 

Only show updates for the following products 

g Q| Adobe Bridge CSC 
g ■ Adobe Drr.’wmvrnvnr CSC 
g «£ Adobe Extension Manager CSC 
g Q Adobe r ire works CSC 
g Q Adobe Flash Pro CS6 
g Q Adobe Illustrator CSC 
g [K] Adobe mcopy CSC 
g Q Adnhe mnesiqo CSC 
g [j|] Adobe Media Lncoder CSC 
g Q Adobe Photoshop CSC 
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g Notify me of new updates on the 
menu bar 

g Allow Adobe to verify update 
success or failure by sending the 
failure status. 

© 


Cancel 
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Closing a Web 
Page or File 


After you finish working on a web page, you can close it and open 
another one, or close it and exit Dreamweaver. Closing a web page 
makes more computer memory available for other processes. Closing a 
web page is different from exiting Dreamweaver: after you close a web 
page, Dreamweaver is still running until you exit it. You can use the 
Exit command on the File menu (Win) or Quit Dreamweaver command 
on the Dreamweaver menu (Mac) to close a document and exit 
Dreamweaver, or you can use the Close button on the Document tab. If 
you try to close a document without saving your final changes, a dialog 
box opens, asking if you want to do so. 


Close a Web Page or File 

Q Click the Close button on the 
Document tab, or click the File 
menu, and then click Close. 

TIMESAVER Click the Close 
button in the Document window or 
press Ctrl+W (Win) or^+W 
(Mac). 

Q Click Yes to save any web page 
changes; click No to close the 
web page or file without saving 
any changes; or click Cancel to 
return to the web page or file 
without closing it. 


Did You Know? 

You can close all web pages at one 
time. Click the File menu, and then 
click Close All Pages or press 
Ctrl+Shift+W (Win) or Q+Shift+W 
(Mac). 

You can cascade or tile Document 
windows. To cascade document win- 
dows, click the Windows menu, and 
then click Cascade. To tile documents, 
click the Windows menu, and then 
click Tile Horizontally or Tile Vertically 
(Windows), or Tile (Mac). 



o 


Ctrl*N 

Clil*0 
Ctrl* Alt* 0 

F 

Ctrl* Shift* O 

Ctrl*W - 
Ctrl* Shift* W 

Save j 

Preview in Growser ► 

Multiscreen Preview 

Check I'aqc ► 

Validate ► 

Compare with Remote Server 
Design Notes... 

Exit Ctrl*Q 



New 

New Fluid Grid Layout. .. 
Open... 

Drowse in Bridge... 

Open Recent 

Open in Frame- 

Close 
Close All 


Click to close file 
Click to close all files 
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Finishing Up 


As much as we enjoy working in Dreamweaver, the time will finally 
come when you want to shut down for the day. The process of closing 
out a Dreamweaver web site, is not difficult; as a matter of fact, it's no 
more complicated than closing down any application. Dreamweaver is 
smart, if you attempt to exit or quit before saving that last file you were 
working on, Dreamweaver prompts you to save or ignore any changes. 


Exit or Quit Dreamweaver 

Use any of the following methods: 

TIMESAVER Press Ctrl+Q 
(Win) or(^+Q (Mac). 

♦ Click the Close button on the 
Dreamweaver program window 
title bar. 

♦ In Macintosh, click the 
Dreamweaver menu, and then 
click Quit Dreamweaver. 

♦ In Windows, click the File 
menu, and then click Exit. 

Click Yes to save any web 
changes, or click No to ignore 
any changes. 

Dreamweaver performs an orderly 
shutdown of the program. 


Click to exit Dreamweaver 



o 
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